<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Home</title>
    <!-- plugins:css -->
    <link rel="stylesheet" th:href="@{/vendors/mdi/css/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/vendors/base/vendor.bundle.base.css}">
    <!-- endinject -->

    <!-- inject:css -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- endinject -->
    <link rel="shortcut icon" th:href="@{/images/favicon.png}"/>
</head>

<body>
<div class="container-scroller">
    <!-- partial:../../partials/_navbar.html -->
    <div th:insert="~{/pages/commons/commons.html::navbar}"></div>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- partial:../../partials/_sidebar.html -->
        <div th:insert="~{/pages/commons/commons.html::siderbar}"></div>
        <!-- partial -->
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Table with contextual classes</h4>
                                <p class="card-description">
                                    Add class <code>.table-{color}</code>
                                </p>
                                <div class="table-responsive pt-3">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                #
                                            </th>
                                            <th>
                                                name
                                            </th>
                                            <th>
                                                gender
                                            </th>
                                            <th>
                                                birth
                                            </th>
                                            <th>
                                                department
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="table-info" th:each="emp:${users}">
                                            <td th:text="${emp.getId()}"></td>
                                            <td th:text="${emp.getName()}"></td>
                                            <td th:text="${emp.getGender()==0?'男':'女'}"></td>
<!--                                            <td>[[${emp.getBirth()}]]</td>-->
                                            <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
                                            <!--两种写法-->
                                            <td th:text="${emp.getDepartment().getName()}"></td>

                                        </tr>
                                        <tr class="table-warning">

                                            <td>
                                                2
                                            </td>
                                            <td>
                                                Messsy Adam
                                            </td>
                                            <td>
                                                Flash
                                            </td>
                                            <td>
                                                $245.30
                                            </td>
                                            <td>
                                                July 1, 2015
                                            </td>
                                        </tr>
                                        <tr class="table-danger">
                                            <td>
                                                3
                                            </td>
                                            <td>
                                                John Richards
                                            </td>
                                            <td>
                                                Premeire
                                            </td>
                                            <td>
                                                $138.00
                                            </td>
                                            <td>
                                                Apr 12, 2015
                                            </td>
                                        </tr>
                                        <tr class="table-success">
                                            <td>
                                                4
                                            </td>
                                            <td>
                                                Peter Meggik
                                            </td>
                                            <td>
                                                After effects
                                            </td>
                                            <td>
                                                $ 77.99
                                            </td>
                                            <td>
                                                May 15, 2015
                                            </td>
                                        </tr>
                                        <tr class="table-primary">
                                            <td>
                                                5
                                            </td>
                                            <td>
                                                Edward
                                            </td>
                                            <td>
                                                Illustrator
                                            </td>
                                            <td>
                                                $ 160.25
                                            </td>
                                            <td>
                                                May 03, 2015
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--            <div class="col-lg-6 grid-margin stretch-card">-->
                    <!--              <div class="card">-->
                    <!--                <div class="card-body">-->
                    <!--                  <h4 class="card-title">Basic Table</h4>-->
                    <!--                  <p class="card-description">-->
                    <!--                    Add class <code>.table</code>-->
                    <!--                  </p>-->
                    <!--                  <div class="table-responsive">-->
                    <!--                    <table class="table">-->
                    <!--                      <thead>-->
                    <!--                        <tr>-->
                    <!--                          <th>Profile</th>-->
                    <!--                          <th>VatNo.</th>-->
                    <!--                          <th>Created</th>-->
                    <!--                          <th>Status</th>-->
                    <!--                        </tr>-->
                    <!--                      </thead>-->
                    <!--                      <tbody>-->
                    <!--                        <tr>-->
                    <!--                          <td>Jacob</td>-->
                    <!--                          <td>53275531</td>-->
                    <!--                          <td>12 May 2017</td>-->
                    <!--                          <td><label class="badge badge-danger">Pending</label></td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>Messsy</td>-->
                    <!--                          <td>53275532</td>-->
                    <!--                          <td>15 May 2017</td>-->
                    <!--                          <td><label class="badge badge-warning">In progress</label></td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>John</td>-->
                    <!--                          <td>53275533</td>-->
                    <!--                          <td>14 May 2017</td>-->
                    <!--                          <td><label class="badge badge-info">Fixed</label></td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>Peter</td>-->
                    <!--                          <td>53275534</td>-->
                    <!--                          <td>16 May 2017</td>-->
                    <!--                          <td><label class="badge badge-success">Completed</label></td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>Dave</td>-->
                    <!--                          <td>53275535</td>-->
                    <!--                          <td>20 May 2017</td>-->
                    <!--                          <td><label class="badge badge-warning">In progress</label></td>-->
                    <!--                        </tr>-->
                    <!--                      </tbody>-->
                    <!--                    </table>-->
                    <!--                  </div>-->
                    <!--                </div>-->
                    <!--              </div>-->
                    <!--            </div>-->
                    <!--            <div class="col-lg-6 grid-margin stretch-card">-->
                    <!--              <div class="card">-->
                    <!--                <div class="card-body">-->
                    <!--                  <h4 class="card-title">Hoverable Table</h4>-->
                    <!--                  <p class="card-description">-->
                    <!--                    Add class <code>.table-hover</code>-->
                    <!--                  </p>-->
                    <!--                  <div class="table-responsive">-->
                    <!--                    <table class="table table-hover">-->
                    <!--                      <thead>-->
                    <!--                        <tr>-->
                    <!--                          <th>User</th>-->
                    <!--                          <th>Product</th>-->
                    <!--                          <th>Sale</th>-->
                    <!--                          <th>Status</th>-->
                    <!--                        </tr>-->
                    <!--                      </thead>-->
                    <!--                      <tbody>-->
                    <!--                        <tr>-->
                    <!--                          <td>Jacob</td>-->
                    <!--                          <td>Photoshop</td>-->
                    <!--                          <td class="text-danger"> 28.76% <i class="mdi mdi-arrow-down"></i></td>-->
                    <!--                          <td><label class="badge badge-danger">Pending</label></td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>Messsy</td>-->
                    <!--                          <td>Flash</td>-->
                    <!--                          <td class="text-danger"> 21.06% <i class="mdi mdi-arrow-down"></i></td>-->
                    <!--                          <td><label class="badge badge-warning">In progress</label></td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>John</td>-->
                    <!--                          <td>Premier</td>-->
                    <!--                          <td class="text-danger"> 35.00% <i class="mdi mdi-arrow-down"></i></td>-->
                    <!--                          <td><label class="badge badge-info">Fixed</label></td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>Peter</td>-->
                    <!--                          <td>After effects</td>-->
                    <!--                          <td class="text-success"> 82.00% <i class="mdi mdi-arrow-up"></i></td>-->
                    <!--                          <td><label class="badge badge-success">Completed</label></td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>Dave</td>-->
                    <!--                          <td>53275535</td>-->
                    <!--                          <td class="text-success"> 98.05% <i class="mdi mdi-arrow-up"></i></td>-->
                    <!--                          <td><label class="badge badge-warning">In progress</label></td>-->
                    <!--                        </tr>-->
                    <!--                      </tbody>-->
                    <!--                    </table>-->
                    <!--                  </div>-->
                    <!--                </div>-->
                    <!--              </div>-->
                    <!--            </div>-->
                    <!--            <div class="col-lg-12 grid-margin stretch-card">-->
                    <!--              <div class="card">-->
                    <!--                <div class="card-body">-->
                    <!--                  <h4 class="card-title">Striped Table</h4>-->
                    <!--                  <p class="card-description">-->
                    <!--                    Add class <code>.table-striped</code>-->
                    <!--                  </p>-->
                    <!--                  <div class="table-responsive">-->
                    <!--                    <table class="table table-striped">-->
                    <!--                      <thead>-->
                    <!--                        <tr>-->
                    <!--                          <th>-->
                    <!--                            User-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            First name-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Progress-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Amount-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Deadline-->
                    <!--                          </th>-->
                    <!--                        </tr>-->
                    <!--                      </thead>-->
                    <!--                      <tbody>-->
                    <!--                        <tr>-->
                    <!--                          <td class="py-1">-->
                    <!--                            <img src="../../images/faces/face1.jpg" alt="image"/>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Herman Beck-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 77.99-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 15, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td class="py-1">-->
                    <!--                            <img src="../../images/faces/face2.jpg" alt="image"/>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Messsy Adam-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $245.30-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            July 1, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td class="py-1">-->
                    <!--                            <img src="../../images/faces/face3.jpg" alt="image"/>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            John Richards-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $138.00-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Apr 12, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td class="py-1">-->
                    <!--                            <img src="../../images/faces/face4.jpg" alt="image"/>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Peter Meggik-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 77.99-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 15, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td class="py-1">-->
                    <!--                            <img src="../../images/faces/face5.jpg" alt="image"/>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Edward-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 160.25-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 03, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td class="py-1">-->
                    <!--                            <img src="../../images/faces/face6.jpg" alt="image"/>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            John Doe-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 123.21-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            April 05, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td class="py-1">-->
                    <!--                            <img src="../../images/faces/face7.jpg" alt="image"/>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Henry Tom-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 150.00-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            June 16, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                      </tbody>-->
                    <!--                    </table>-->
                    <!--                  </div>-->
                    <!--                </div>-->
                    <!--              </div>-->
                    <!--            </div>-->
                    <!--            <div class="col-lg-12 grid-margin stretch-card">-->
                    <!--              <div class="card">-->
                    <!--                <div class="card-body">-->
                    <!--                  <h4 class="card-title">Bordered table</h4>-->
                    <!--                  <p class="card-description">-->
                    <!--                    Add class <code>.table-bordered</code>-->
                    <!--                  </p>-->
                    <!--                  <div class="table-responsive pt-3">-->
                    <!--                    <table class="table table-bordered">-->
                    <!--                      <thead>-->
                    <!--                        <tr>-->
                    <!--                          <th>-->
                    <!--                            #-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            First name-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Progress-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Amount-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Deadline-->
                    <!--                          </th>-->
                    <!--                        </tr>-->
                    <!--                      </thead>-->
                    <!--                      <tbody>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            1-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Herman Beck-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 77.99-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 15, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            2-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Messsy Adam-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $245.30-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            July 1, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            3-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            John Richards-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $138.00-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Apr 12, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            4-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Peter Meggik-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 77.99-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 15, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            5-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Edward-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 160.25-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 03, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            6-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            John Doe-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 123.21-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            April 05, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            7-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Henry Tom-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            <div class="progress">-->
                    <!--                              <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>-->
                    <!--                            </div>-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 150.00-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            June 16, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                      </tbody>-->
                    <!--                    </table>-->
                    <!--                  </div>-->
                    <!--                </div>-->
                    <!--              </div>-->
                    <!--            </div>-->
                    <!--            <div class="col-lg-12 grid-margin stretch-card">-->
                    <!--              <div class="card">-->
                    <!--                <div class="card-body">-->
                    <!--                  <h4 class="card-title">Inverse table</h4>-->
                    <!--                  <p class="card-description">-->
                    <!--                    Add class <code>.table-dark</code>-->
                    <!--                  </p>-->
                    <!--                  <div class="table-responsive pt-3">-->
                    <!--                    <table class="table table-dark">-->
                    <!--                      <thead>-->
                    <!--                        <tr>-->
                    <!--                          <th>-->
                    <!--                            #-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            First name-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Amount-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Deadline-->
                    <!--                          </th>-->
                    <!--                        </tr>-->
                    <!--                      </thead>-->
                    <!--                      <tbody>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            1-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Herman Beck-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 77.99-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 15, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            2-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Messsy Adam-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $245.30-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            July 1, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            3-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            John Richards-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $138.00-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Apr 12, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            4-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Peter Meggik-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 77.99-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 15, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            5-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Edward-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 160.25-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 03, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            6-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            John Doe-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 123.21-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            April 05, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr>-->
                    <!--                          <td>-->
                    <!--                            7-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Henry Tom-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 150.00-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            June 16, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                      </tbody>-->
                    <!--                    </table>-->
                    <!--                  </div>-->
                    <!--                </div>-->
                    <!--              </div>-->
                    <!--            </div>-->
                    <!--            <div class="col-lg-12 stretch-card">-->
                    <!--              <div class="card">-->
                    <!--                <div class="card-body">-->
                    <!--                  <h4 class="card-title">Table with contextual classes</h4>-->
                    <!--                  <p class="card-description">-->
                    <!--                    Add class <code>.table-{color}</code>-->
                    <!--                  </p>-->
                    <!--                  <div class="table-responsive pt-3">-->
                    <!--                    <table class="table table-bordered">-->
                    <!--                      <thead>-->
                    <!--                        <tr>-->
                    <!--                          <th>-->
                    <!--                            #-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            First name-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Product-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Amount-->
                    <!--                          </th>-->
                    <!--                          <th>-->
                    <!--                            Deadline-->
                    <!--                          </th>-->
                    <!--                        </tr>-->
                    <!--                      </thead>-->
                    <!--                      <tbody>-->
                    <!--                        <tr class="table-info">-->
                    <!--                          <td>-->
                    <!--                            1-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Herman Beck-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Photoshop-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 77.99-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 15, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr class="table-warning">-->
                    <!--                          <td>-->
                    <!--                            2-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Messsy Adam-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Flash-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $245.30-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            July 1, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr class="table-danger">-->
                    <!--                          <td>-->
                    <!--                            3-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            John Richards-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Premeire-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $138.00-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Apr 12, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr class="table-success">-->
                    <!--                          <td>-->
                    <!--                            4-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Peter Meggik-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            After effects-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 77.99-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 15, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                        <tr class="table-primary">-->
                    <!--                          <td>-->
                    <!--                            5-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Edward-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            Illustrator-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            $ 160.25-->
                    <!--                          </td>-->
                    <!--                          <td>-->
                    <!--                            May 03, 2015-->
                    <!--                          </td>-->
                    <!--                        </tr>-->
                    <!--                      </tbody>-->
                    <!--                    </table>-->
                    <!--                  </div>-->
                    <!--                </div>-->
                    <!--              </div>-->
                    <!--            </div>-->
                </div>
            </div>
            <!-- content-wrapper ends -->
            <!-- partial:../../partials/_footer.html -->
            <div th:insert="~{/pages/commons/commons.html::footer}"></div>
            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../../static/vendors/base/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="../../../static/js/off-canvas.js"></script>
<script src="../../../static/js/hoverable-collapse.js"></script>
<script src="../../../static/js/template.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<!-- End custom js for this page-->
</body>

</html>
